import { useState } from 'react'
import './index.scss'

function Faq() {
  const menus = [
    { id: 1, title: 'Electronic cigarette license plate' },
    { id: 2, title: 'Delivery time' },
    { id: 3, title: 'Returns and exchanges' },
    { id: 4, title: 'Warranty Statement' },
    { id: 5, title: 'How to purchase' },
    { id: 6, title: 'How to purchase a header' },
    { id: 7, title: 'How to sell tokens' },
    { id: 8, title: 'How to become a node' },
  ]

  const [menuSelect, selectMenuSelect] = useState();
  const selectMenu = (id) => {
    selectMenuSelect(id)
  }

  return (
    <div className='faq'>
      <div className='title'>FAQ</div>
      <div className='faq-list'>
        <div className='menu'>
          {
            menus.map(item => (
              <div className={`menu-item ${menuSelect === item.id ? 'active' : ''}`} key={item.id} onClick={() => selectMenu(item.id)}>
                <img className='icon' alt='icon' src={require('../../assets/faq-icon.png')} />
                { item.title }
              </div>
            ))
          }
        </div>
        <div className='content'>
          <div className='content-title'>Electronic cigarette license plate</div>
          <div className='content-text'>
            Please note to pay according to the selected payment grid. Using the wrong grid may resu ult in the inability to receive and retrieve<br/>
            payments.The delivery time is subject to on chain confirmation. If you have any questions, please co ontact customer service.1. <br/>
            Please note to pay according to the selected payment grid. Using the wrong grid may resu ult in the inability to receive and retrieve <br/>
            payments.The delivery time is subject to on chain confirmation. If you have any questions, please co ont<br/>
            act customer service.
            Please note to pay according to the selected payment grid. Using the wrong grid may resu ult in the inability to receive and retrieve<br/>
            payments.The delivery time is subject to on chain confirmation. If you have any questions, please co ontact customer service.1. <br/>
            Please note to pay according to the selected payment grid. Using the wrong grid may resu ult in the inability to receive and retrieve<br/>
            payments.The delivery time is subject to on chain confirmation. If you have any questions, please co ontact customer service.Please note<br/>
            to pay according to the selected payment grid. Using the wrong grid may resu ult in the inability to receive and retrieve payments.The delivery <br/>
            time is subject to on chain confirmation. If you have any questions, please co ontact customer service.1. Please note to pay according to the selected<br/>
            payment grid. Using the wrong grid may resu ult in the inability to receive and retrieve payments.The delivery time is subject to on chain<br/>
            confirmation. If you have any questions, please co ontact customer service.
          </div>
        </div>
      </div>
      <div className='bottom-box'></div>
    </div>
  )
}

export default Faq